<template>
  <div class="page_container">
    <p style="color: white;">The screen is supposed to be dark. In this part you need to use visualization to boost your learning.</p>

    <div class="middle_container">
      <!-- 左按钮 -->
      <div class="left_button">
        <el-button type="primary" style="margin:49% 50px;" @click="get_last_question">Previous</el-button>
      </div>
      <div class="question_container">
        <div class="title_container">
          <div class="title" />
          <div class="title_text">{{ form.question_type }}</div>
        </div>
        <div id="comment">{{ form.comment }}</div>
        <div id="number">No.{{ form.question_number }}</div>
        <div id="question">
          <span v-for="(questionPiece,qpIndex) in this.form.question" :key="qpIndex">{{ questionPiece }}</span>
        </div>
        <el-row id="option" :gutter="1">
          <el-col v-for="(choiceList,choiceIndex) in this.form.choice" :key="choiceIndex" :span="choiceList.length" :offset="1">
            <div>
              <ul>
                <li v-for="(choice,idx) in choiceList" :key="idx" @click="choose($event,choiceIndex)">{{ choice }}</li>
              </ul>
            </div>
          </el-col>
        </el-row>
        <div id="show">{{ form.show }}</div>
        <el-button type="primary" style="margin: 20px 45% 0 45%;" @click="onSubmit">{{ form.button_text }}</el-button>
        <!-- <p>YOUR ANSWER:{{form.user_answer}}</p> -->
      </div>

      <!-- 右按钮 -->
      <div class="right_button">
        <el-button type="primary" style="margin: 49% 100px;" @click="get_next_question">Next</el-button>
      </div>
    </div>

    <div class="progress_container">
      <div class="outside_progress">
        <div class="inside_progress">
          <p style="text-align: right; padding-right: 10px;">{{ form.progress }}%</p>
        </div>
      </div>
      <el-button class="conclude_button">Conclude for now</el-button>
      <el-button class="quit_button">Quit</el-button>
    </div>

    <div class="bottom_container">
      <el-button type="primary" style="margin-left: 200px;">Acculturation</el-button>
      <el-button type="primary">Interaction</el-button>
      <el-button type="primary">Narration</el-button>
      <el-button type="primary">Literacy</el-button>
      <el-button type="primary">Lexis</el-button>
      <el-button type="primary">Syntax</el-button>
      <el-button type="primary">Extended Interaction</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        comment: 'Tough choices!',
        question_type: 'MULTIPLECHOICE',
        question_number: '1',
        question: ['The ', 'man', ' is ', 'on', ' the ', 'car'],
        blankNumber: 3,
        blankIndex: [1, 3, 5],
        choice: [['man', 'woman', 'child', 'dog'], ['under', 'on', 'in'], ['car', 'sofa', 'table', 'helicopter']],
        show: '',
        warn: 'you haven\'t finished yet',
        true_answer: 'The man is on the car.',
        counter: '',
        button_text: 'Submit',
        answerSheetEmpty: true,
        seen: false,
        progress: 59
      }
    }
  },
  created() {
    // shuffle choices
    for (let i = 0; i < this.form.choice.length; i++) {
      this.shuffle(this.form.choice[i])
    }
    for (let i = 0; i < this.form.blankNumber; i++) {
      this.form.question[this.form.blankIndex[i]] = '___'
    }
  },
  methods: {
    onSubmit() {
      if (this.form.button_text === 'Submit') {
        if (this.form.answerSheetEmpty === true) {
          this.form.show = this.form.warn
        } else {
          this.form.show = 'The true answer is: ' + this.form.true_answer
          this.form.button_text = 'Next'
        }
      }
      if (this.form.button_text === 'Next') {
        // TODO
        // get next question's data
      }
    },
    onEmpty() {
      this.form.user_answer = ''
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    },
    shuffle: function(a) {
      for (let i = a.length; i; i--) {
        const j = Math.floor(Math.random() * i);
        [a[i - 1], a[j]] = [a[j], a[i - 1]]
      }
    },
    choose: function(event, idx) {
      var text = event.currentTarget.innerText
      console.log(text, idx)
      // this.form.question[this.form.blankIndex[idx]] = text
      this.form.question.splice(this.form.blankIndex[idx], 1, text)
      let cnt = 0
      for (let i = 0; i < this.form.blankNumber; i++) {
        if (this.form.question[this.form.blankIndex[i]] !== '___') {
          cnt++
        }
      }
      if (cnt === this.form.blankNumber) this.form.answerSheetEmpty = false
    },
    get_next_question() {},
    get_last_question() {}
  }
}

</script>

<style scoped>
  .page_container{
    position: relative;
    background: rgb(4,4,4);
    height: 800px;
  }
  .title_container{
    position: relative;
    width: 300px;
    height: 55px;
    font-size: 0px;
    overflow: hidden;
    margin: 10px 10px;
  }
  .title{
    position: absolute;
    display: inline-block;
    height: 60px;
    width: 10px;
    margin-left: 10px;
    background: #409EFF;
  }
  .title_text{
    position: absolute;
    display: inline-block;
    margin-top: 5px;
    margin-left: 20px;
    height: 50px;
    width: 250px;
    color: white;
    background: #1F2D3D;
    font-size: 16pt;
    text-align: center;
    padding: 15px;
  }
  .middle_container{
    width: 100%;
    height: 60%;
    overflow: hidden;
    position: relative;
  }
  .left_button{
    position: absolute;
    height: 100%;
    width: 20%;
  }
  .question_container{
    border: 2px solid white;
    border-radius: 10px;
    position: absolute;
    margin:0px 20%;
    width: 60%;
    height: 100%;
    font-size: 20px;
    color: white;
  }
  .right_button{
    position: absolute;
    margin-left: 80%;
    height: 60%;
    width: 20%;
  }
  #number{
    width: 200px;
    height: 30px;
    margin: 0 20px;
  }
  #question{
    width: 90%;
    height: 30px;
    font-size: 20px;
    margin: 0 30px;
  }
  #answer{
    width: 90%;
    height: 30px;
    font-size: 20px;
    margin: 0 30px;
  }
  .input{
    width: 60%;
    margin: 20px 0 0 30px;
  }
  #show{
    width: 90%;
    height: 50px;
    padding-top: 5px;
    border: 1px solid white;
    margin: 5px 0 0 30px;
    text-align: center;
  }
  .progress_container{
    width: 100%;
    height: 100px;
    margin: 10px 30px;
    position: relative;
  }
  .outside_progress{
    margin-top: 20px;
    height: 20px;
    width: 400px;
    border-radius: 10px;
    background: #A13E0D;
  }
  .inside_progress{
    height: 100%;
    width: 230px;
    border-radius: 10px;
    padding-right: 2px;
    background: #00FF00;
  }
  .conclude_button{
    position: absolute;
    margin: 0 70%;
  }
  .quit_button{
    position: absolute;
    margin: 0 90%;
  }
  .bottom_container{
    width: 100%;
    height: 45px;
    margin: 20px 0 0 0;
    border: 2px solid white;
  }
  #scrambled{
    margin: 20px 0px;
  }
  .options{
    background-color: rgb(58,58,58);
    margin-left: 10px;
    text-align: center;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
  }
  #comment {
    font-size: 18pt;
    margin-left: 10px;
  }
  li{
    list-style: none;
    background-color: rgb(58,58,58);
    margin-bottom: 7px;
    text-align: center;
    padding:3px;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    border-color: white;
    border-style: solid;
    border-width: 1px;
  }
</style>
